<template>
  <el-dialog :close-on-click-modal="false" :title="mainTitleName()" v-model="visible" :width="700" destroy-on-close @closed="$emit('closed')">
    <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="right">
      <el-row>
        <el-col :span="24">
          <el-form-item label="句子" prop="word">
            <el-input v-model="form.word" placeholder="请输入句子" :maxlength="200" clearable
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="译文" prop="translation">
            <el-input v-model="form.translation" placeholder="请输入译文" :maxlength="200" clearable show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="关键字" prop="is_keyword">
            <el-input v-model="form.is_keyword" placeholder="请输入关键字" :maxlength="200" clearable
                      show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="form.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>

  <scDialog v-model="play.status" :title="play.type == 1 ? '查看音频' : '查看视频'" :width="800">
    <div style="display: flex; align-items:center;justify-content: center;">
      <video v-if="play.type == 2" ref="videoControls" :src="play.src" controls style="width: 100%; height: 400px; background:#000;"></video>
      <audio v-else ref="audioControls" :src="play.src" controls style="width: 100%;"></audio>
    </div>
    <template #footer>
      <el-button @click="closePlay(play.type)">取 消</el-button>
    </template>
  </scDialog>

</template>

<script>
import scAudioButton from '@/components/scUpload/audio_button.vue'
export default {
  emits: ['success', 'closed'],
  components: {
    scAudioButton
  },
  props: {
    mainName: {
      type: String,
      default: () => {
        return '专题库'
      }
    },
  },
  data() {
    return {
      mode: "add",
      course: null,
      visible: false,
      isSaveing: false,
      form: this.getDefaultRuleForm(),
      rules: {
        word: [
          {required: true, message: '请输入句子'},
        ],
        is_keyword: [
          {required: true, message: '请输入关键字'},
        ],
        translation: [
          {required: true, message: '请输入译文'},
        ]
      },
      play: {
        src: '',
        type: 1,
        status: false
      },
      voiceFiles: [],
      translationVoiceFiles: []
    }
  },
  mounted() {

  },
  methods: {
    //显示
    open(mode = 'add', course) {
      this.mode = mode;
      this.visible = true;
      this.course = course
      this.form.course_id = course.courseId
      this.form.package_id = course.id
      return this
    },
    //表单提交方法
    async submit() {
      if (!await this.$refs.dialogForm.validate().catch(() => { return false })) {
        return false
      }
      let _data = this.form
      try {
        this.isSaveing = true;
        if (this.form.id) {
          await this.$API.course.grammarVocabulary.action.PUT(_data)
        } else {
          await this.$API.course.grammarVocabulary.action.POST(_data)
        }

        this.$emit('success')
        this.visible = false;
        this.$notify.success("保存成功")
      } finally {
        this.isSaveing = false;
      }
    },
    //表单注入数据
    setData(data) {
      let _form = {
        id:data.id?data.id:0,
        course_id : data.courseId?data.courseId:0,
        package_id : data.packageId?data.packageId:0,
        status: data.status ?  parseInt(data.status): 1,
        word: data.word ? data.word : '',
        analysis: data.analysis ? data.analysis : '',
        translation: data.translation ? data.translation : '',
        is_keyword: data.isKeyword?data.isKeyword:''
      };
      this.form = _form
    },
    getDefaultRuleForm() {
      return {
        id: null,
        course_id: '',
        package_id: '',
        word: '',
        analysis: '',
        translation: '',
        is_keyword: '',
        status: 1
      }
    },
    mainTitleName() {
      let titleName = '';
      if (!this.form.id && this.course) {
        titleName = `添加【${this.course.title}】${this.mainName}`;
      } else if (!this.form.id) {
        titleName = `新增${this.mainName}`;
      } else {
        titleName = `编辑${this.mainName}`;
      }
      return titleName;
    },
    setAttrFile(file, type) {
      if (type == 'voice') {
        this.voiceFiles.push({
          name: file.name,
          path: file.path,
          url: file.url,
          tempImg: file.tempImg
        })
        this.form.voiceFile = file.url
      }else if (type == 'translationVoice') {
        this.translationVoiceFiles.push({
          name: file.name,
          path: file.path,
          url: file.url,
          tempImg: file.tempImg
        })
        this.form.translationVoiceFile = file.url
      }
    },
    //点击标签前往预览
    previewAttrFileItem(e, index, type) {
      if (type == 'voice') {
        let url = this.voiceFiles[index].tempImg
        this.canPlay(url, 1)
      } else if (type == 'translationVoice') {
        let url = this.translationVoiceFiles[index].tempImg
        this.canPlay(url, 1)
      } else {
        window.open(url)
      }
    },
    //移除单个文件
    delAttrFileItem(e, index, type) {
      if (type == 'voice') {
        this.voiceFiles.splice(index, 1)
      } else if (type == 'translationVoice') {
        this.translationVoiceFiles.splice(index, 1)
      }
    },
    getFileName(o) {
      var pos = o.lastIndexOf("/")
      return o.substring(pos + 1);
    },
    canPlay(url, type) {
      this.play.status = true
      this.play.type = type
      this.play.src = url

      this.$nextTick(() => {
        if (this.$refs.audioControls) {
          this.$refs.audioControls.load()
          this.$refs.audioControls.play()
        }
        this.$refs.videoControls && this.$refs.videoControls.load()
      })
    },
    closePlay(type) {
      if (type == 1) {
        this.$refs.audioControls && this.$refs.audioControls.pause()
      } else if (type == 2) {
        this.$refs.videoControls && this.$refs.videoControls.pause()
      }
      this.play.status = false
    }
  }
}
</script>

<style>
</style>
